<template>
    <div style="margin-left: 20px">
        <el-row>
            <el-col :span="6">
                <span>项目编号：{{ projectInfo.projectCode }}</span>
            </el-col>
            <el-col :span="6">
                <span>项目名称：{{ projectInfo.projectName  }}</span>
            </el-col>
            <el-col :span="6">
                <span>采购类别：{{ projectInfo.categoryName }}</span>
            </el-col>
            <el-col :span="6">
                <span>预算金额：{{ projectInfo.budget }}元</span>
            </el-col>
            <el-col :span="6">
                <span style="margin-top: 10px">成交供应商：{{ supplierPriceFirst.supplierName }}</span>
            </el-col>
            <el-col :span="6">
                <span style="margin-top: 10px">报价排名：{{ supplierPriceFirst.priceRanking }}</span>
            </el-col>
            <el-col :span="6">
                <span style="margin-top: 10px">报价：{{ supplierPriceFirst.price }}元</span>
            </el-col>

            <!--          生成通知书-->
            <el-col :span="24">
                <div style="margin-top: 20px">
                    <span>生成通知书:</span>
                    <el-button size="small" type="primary" style="margin-left: 10px" @click="createResultNotify" :disabled="projectInfo.isSubmit == 1">生成通知书</el-button>
                    <span style="margin-left: 10px;color: red;font-size: 10px" v-if="projectInfo.isSubmit === 1">成交合同审批已提交，无法更改</span>
                </div>
                <div style="margin-top: 10px;margin-bottom: 10px" v-if="true">
                    <el-table
                            :data="ResultNotificationFileList"
                            border
                            style="width: 80%">
                        <el-table-column
                                prop="generateTime"
                                min-width="150px"
                                label="生成时间"
                        >
                        </el-table-column>

                        <el-table-column
                                prop="filename"
                                min-width="250px"
                                label="文件名">
                        </el-table-column>
                        <el-table-column
                                width="120px"
                                label="操作"
                        >
                            <template slot-scope="{$index,row}">
                                <el-button type="text" style="text-align: center;margin-left: 7px" @click="downloadResultNotify(row)">下载</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <!--            上传通知书-->
            <el-col :span="24">
                <div style="margin-top: 20px" v-if="projectInfo.isArchive === 0">
                    <span>上传通知书</span>
                    <el-upload style="margin-left: 10px;display: inline"
                               :show-file-list="false"
                               :headers='token'
                               :action="uploadUrl"
                               accept=".pdf"
                               ref="upload"
                               :on-success="handleSuccess"
                               :on-progress="progress"
                               :on-error="fileError"
                               :before-upload="beforeUpload"
                               v-loading.fullscreen.lock="loading"
                               :element-loading-text="progressPercentTitle"
                               element-loading-spinner="el-icon-loading"
                               element-loading-backgroud="rgba(0,0,0,0.1)"
                    >
                        <el-button size="small" type="primary">上传盖章后的成交结果通知书</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传pdf文件，且不超过200Mb</div>
                    </el-upload>
                </div>
                <div v-else>
                    <span>盖章后的成交结果通知书</span>
                </div>
                <div style="margin-top: 10px;margin-bottom: 10px" v-if="true">
                    <el-table
                            :data="resultNotifyStampedList"
                            border
                            style="width: 50%">

                        <el-table-column
                                prop="genarateTime"
                                min-width="130px"
                                label="上传时间">
                        </el-table-column>
                        <el-table-column
                                prop="filename"
                                min-width="170px"
                                label="通知书名称">
                        </el-table-column>
                        <el-table-column
                                width="120px"
                                label="操作"
                        >
                            <template slot-scope="{$index,row}">
                                <el-button type="text" style="text-align: center;margin-left: 7px" @click="downLoadResultNotifySteamed(row)">下载</el-button>
                                <el-button v-if="projectInfo.isArchive === 0" type="text" style="text-align: center;margin-left: 7px;color: red" @click="deleteFile(row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {serverIp} from "../../../public/config";
import {downResultStamped} from "@/api/shopping/reportManage";
import downloadFile from "@/utils/downloadFile";
import {
    createRestNotifyFile, deleteRestFile,
    downloadResultNotifyFile,
    getAllResultNotification,
    getAllResultStamped
} from "@/api/shopping/resultNotifa";
import axios from "axios";
import UploadFile from "@/components/uploadFile/index.vue";

export default {
    name:"resultNotificationManage",
    components: {UploadFile},
    props: {
        projectInfo: {
            type: Object,
            default() {
                return {}
            }
        },
        resultNotifyStampedList:{
            type: [],
            default() {
                return [];
            }
        },
        ResultNotificationFileList: {
            type: [],
            default() {
                return [];
            }
        },
        supplierPriceFirst:{
            type: Object,
            default() {
                return {}
            }
        },
        required: true
    },
    data() {
        return {
            project: {},
            resultNotifyStampedList: [],
            token: { Authorization:localStorage.getItem("token") },
            uploadUrl: `${serverIp}/purchase/upload/resultStamped/${this.projectInfo.projectId}`,
            loading: false,
            ResultNotificationFileList: [], // 结果通知书
            progressPercentTitle: "", // 展示百分比
            progressPercent: 0, // 进度
        }
    },
    mounted() {
        this.project = this.projectInfo
    },
    watch: {
        projectInfo: {
            // 监听数据发生变化的处理函数
            handler(newV) {
                this.project = JSON.parse(JSON.stringify(newV));//将监听到修改的值赋予到dataAttrs中
            },
            // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            deep: true
        }
    },
    methods: {
        /*submitUpload(){
            this.$refs.upload.submit()
        },
        my_upload(uploader) {
            let form = new FormData();
            form.append('file',uploader.file);
            axios({
                method:'post',
                headers: {
                    "Content-Type": "multipart/form-data",
                    "Authorization":localStorage.getItem("token")
                },
                url:this.uploadUrl,//自定义上传url
                data:form,
                onUploadProgress: progressEvent => {
                    let percent=(progressEvent.loaded / progressEvent.total * 100) | 0
                    uploader.onProgress({percent:percent});//调用uploader的进度回调
                }
            }).then((res)=>{
                if(res.data.code == 200){
                    this.$message.success('上传完成');
                }else{
                    this.$message.error('上传失败');
                }
            }).catch((err)=>{
                this.$message.error(err);
            })
        },*/
        // 文件上传之前钩子
        beforeUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 200;
            if (!isLt2M) {
                this.$message.error('上传文件大小大小不能超过 200MB!');
                return false;
            }
            if (file.type !== "application/pdf"){
                this.$message.error('上传文件必须是pdf');
                return false;
            }
        },
        // 上传文件时钩子
        progress(event,file,fileList){
            this.loading = true;
            this.progressPercent = Math.floor(event.percent);
            this.progressPercentTitle = "已上传" + this.progressPercent + "%"
        },
        // 文件上传失败
        fileError(){
            this.loading=false;
            this.$message.error("失败")
        },
        handleSuccess(res, file, fileList){
            this.loading = false;
            // this.$message.success("上传成功")

            // 必须在上传成功之后 进度条继续++
            if (res.status == true) {
                //关闭遮罩，进度条归零
                this.loading = false
                this.progressPercent = 0
            }
            alert("上传成功！")
            this.getAllResultNotifyStamped(this.projectInfo.projectId)
        },
        // 下载文件
        async downLoadResultNotifySteamed(row){
            this.$message.success("正在拼命下载请稍后")
            let res = await downResultStamped(row.id)
            downloadFile(res,row.filename)
        },
        // 获得文件上传的列表
        async getAllResultNotifyStamped(data){
            try {
                let res = await getAllResultStamped(data);
                if (res.data.code === 200) {
                    this.resultNotifyStampedList = res.data.data;
                }else {
                    this.$message.error(res.data.msg())
                }
            } catch (e) {
                this.$message.error(e)
            }
        },
        // 下载生成的成果文件
        async downloadResultNotify(row){
            this.$message.success("正在拼命下载请稍后")
            let res = await downloadResultNotifyFile(row.id)
            downloadFile(res,row.filename)
        },
        // 生成结果通知书文件
        async createResultNotify(){
            this.$message.success("正在生成，请稍后")
            try {
                let res = await createRestNotifyFile(this.project.projectId)
                if (res.data.code === 200) {
                    this.$message.success("生成成功")
                    await this.getAllResultNotifyFileList()
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e)
            }
        },
        // 获得所有的结果通知书
        async getAllResultNotifyFileList(){
            try {
                let res = await getAllResultNotification(this.project.projectId)
                if (res.data.code === 200) {
                    this.ResultNotificationFileList = res.data.data;
                } else {
                    this.$message.error(res.data.msg)
                }
            } catch (e) {
                this.$message.error(e)
            }

        },
        // 删除成交结果通知书文件
        async deleteFile(row) {
            this.$loading({
                fullscreen: true,
            });
            try {
                let res = await deleteRestFile(row.id);
                if (res.data.success) {
                    this.$message.success("删除成功")
                    // 删除成功后请求
                    await this.getAllResultNotifyStamped(this.projectInfo.projectId)
                } else {
                    this.$message.error(res.data.msg);
                }
            } catch (e) {
                this.$message.error(e)
            } finally {
                this.$loading().close();
            }
        },
    }
}

</script>
<style scoped>

</style>
